<template>
	<view class="tabbarbox">
		<view class="tabbar-item" v-for="(item, index) in tabbarList" :class="[item.centerItem ? ' center-item' : '']"
			@click="changeItem(item)">
			<view class="item-top">
				<image :src="currentItem == item.id ? item.selectIcon : item.icon"></image>
			</view>
			<view class="item-bottom" :class="[currentItem == item.id ? 'item-active' : '']">
				<text>{{ item.text }}</text>
			</view>
		</view>
		<!-- <view class="dibu">
			有点脾气怎么了 我弄死你妈的
		</view> -->
	</view>
</template>

<script>
	export default {
		props: {
			currentPage: {
				type: Number,
				default: 0
			}
		},
		data() {
			return {
				currentItem: 0,
				tabbarList: [{
						id: 0,
						path: '/pages/pagesA/index',
						icon: "/static/tabbar/shouye.png",
						selectIcon: "/static/tabbar/shouyes.png",
						text: '首页',
						centerItem: false
					},
					{
						id: 1,
						path: '/pages/pagesA/message',
						icon: "/static/tabbar/datings.png",
						selectIcon: "/static/tabbar/dating.png",
						text: '零工大厅',
						centerItem: false
					}, {
						id: 2,
						path: '',
						icon: "/static/tabbar/fabu.png",
						selectIcon: "/static/tabbar/fabu.png",
						text: '发布',
						centerItem: true
					},
					{
						id: 3,
						path: '/pages/pagesA/rencai',
						icon: "/static/tabbar/rencai.png",
						selectIcon: "/static/tabbar/rencais.png",
						text: '零工人才',
						centerItem: false
					}, {
						id: 4,
						path: '/pages/pagesA/main',
						icon: "/static/tabbar/wode.png",
						selectIcon: "/static/tabbar/wodes.png",
						text: '我的',
						centerItem: false
					}
				]
			};
		},
		mounted() {
			this.currentItem = this.currentPage;
			// 非微信小程序需隐藏原生tabBar（微信小程序已通过"custom": true配置项隐藏原生tabbar）
			// if (process.env.VUE_APP_PLATFORM != 'mp-weixin') {
			// 	uni.hideTabBar()
			// }
		},
		methods: {
			changeItem(item) {
				if (item.id == 2) {
					this.$emit('open-modal'); // 发出事件以打开弹框
				} else {
					uni.switchTab({
						url: item.path
					});
				}
			}
		}
	};
</script>

<style lang="scss" scoped>
	view {
		padding: 0;
		margin: 0;
		box-sizing: border-box;
	}

	.tabbarbox {
		position: fixed;
		bottom: 0rpx;
		left: 50%;
		transform: translateX(-50%);
		width: 100%;
		height: 160rpx;
		display: flex;
		align-items: center;
		justify-content: space-around;
		padding: 5rpx 0;
		color: #767676;
		border-top: 2rpx solid #ccc;
		background: #fff;
	}

	.tabbarbox .tabbar-item {
		width: 20%;
		height: 100rpx;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		text-align: center;
	}

	.tabbarbox .item-active {
		color: #0256FF;
	}

	.tabbarbox .center-item {
		display: block;
		position: relative;
	}

	.tabbarbox .tabbar-item .item-top {
		width: 80rpx;
		height: 80rpx;
		padding: 10rpx;
	}

	.tabbarbox .center-item .item-top {
		flex-shrink: 0;
		width: 140rpx;
		height: 140rpx;
		padding: 20rpx;
		position: absolute;
		top: -80rpx;
		/* left: calc(50% - 50rpx); */
		border-radius: 50%;
		// box-shadow: 0 0 0 0 5px #999;
		background: #fff;
		border-top: 2rpx solid #ccc;
	}

	.tabbarbox .tabbar-item .item-top image {
		width: 48rpx;
		height: 48rpx;
	}

	.tabbarbox .center-item .item-top image {
		width: 100rpx;
		height: 100rpx;
	}

	.tabbarbox .tabbar-item .item-bottom {
		font-size: 28rpx;
		width: 100%;
	}

	.tabbarbox .center-item .item-bottom {
		position: absolute;
		bottom: 0;
	}
</style>